<!doctype html>
<html lang="zh-CN"><!--语言规定-->
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8"><!--字符编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--视口设置:与设备等宽，1：1，不可缩放-->
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <title>欢迎来到图书共享！</title>

    <style>
      html{
        height:100%
      }
      
      body{
        height:125%
      }
      button{
        font-size: 30px;
      }

      #app{
        width:100%;
        height:125%;
        /*background-color:bisque;*/
        display: flex;/*定义一个（#app）flex盒子*/
        flex-direction:column;/*内部元素的排列方向*/
        min-width: 900px;
        min-height: 500px;
        overflow: auto;/*超出范围自动产生滚动条*/
        position:relative;
      }
      button{
        width:200px;
        height:70px;
      }
      .leader{
        height:40px;
        width:100%;
        flex-direction: row;
        position:fixed;
        top:0;
      }
      .leader ul{
        margin:0;
        padding:0;
        background-color:#444;
      }
      .leader ul li{
        display:inline-block;
      }
      .leader ul li a{
        display:block;
        color:aliceblue;
        text-align:center;
        padding:16px;
        text-decoration: none;
      }
      .leader ul li a:hover{
        background-color: #888;
      }

      .nav{
        height: 600px;
        width:100%;
        box-shadow: rgba(0,0,0,0.1) 0px 1px 0px 2px;/*左，上的阴影偏移量*/

        /*background-color: blue;*/
      }

      .file{
        position:absolute;
        left:175px;
        top:150px;
      }

      .buttonposition{
        position:absolute;
        left:530px;
        top:300px;
      }

      .middle{
        height: 50px;
        width:100%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px 1px;/*左，上的阴影偏移量*/
      }
      
      .main{
        height:auto;/*本元素作为flex中的元素以自动扩展占位*/
        width: 100%;
        display:flex;
        flex-direction: row;
        box-shadow: rgba(0,0,0,0.1) 0px 8px 0px 0px;
        background-image: url(images/choice2.jpg);
      }

      .title{
        width:425px;
        flex:auto;
        box-shadow: rgba(0,0,0,0.1) 1px 0px 0px 0px;
        /*background-color:  rgba(174, 232, 236, 0.603);*/
      }
      .content{
        width:425px;
        flex:auto;
        box-shadow:  rgba(0,0,0,0.1) 1px 0px 0px 0px;
        /*background-color: rgba(174, 232, 236, 0.603);*/
      }
      
      .last{
        width:425px;
        flex:auto;
        box-shadow: rgba(0,0,0,0.1) 1px 0px 0px 0px;
        /*background-color: rgba(174, 232, 236, 0.603);*/
      }
      .bottom{
        width:100%;
        height:10px;
        box-shadow: rgba(0,0,0,0.1) 1px 0px 0px 0px;
        /*background-color:  rgba(174, 232, 236, 0.603);*/
      }

    </style>
  </head>
  <body>

    <div id="app" >
     <div class="leader">
       <ul>
         <li><a href="index.html">首页</a></li>
         <li><a href="login.html">登录/注册</a></li>
       </ul>
     </div>

     <div class="file">
      <p class="text-center"  style="color: aliceblue;font-size: 40px;font-weight: lighter;">
        Everyone could enjoy reading and see the large world
      </p>
     </div>


     <div class="buttonposition">
      <button type="button" class="btn btn-outline-light btn-lg" onclick="window.location.href='login.html'" >
        Enter the library
      </button>
     </div>

     <div class="nav" style="background-image:url(images/choice1.jpg);background-repeat: no-repeat;background-size: 100%,100%;">
      
     </div>


     <div class="middle" style="background-color:rgb(0, 0, 0);">
      <p class="text-center"  style="color: aliceblue;font-size: 30px;font-weight: lighter;">
        Welcome to sharing library!
      </p>
     </div>


     <div class="main">
       <div class="title">
        <img src="images/choice6.png" class="img-thumbnail" alt="...">
        <div>
          <p class="text-center"  style="color:black;font-size: 13px;font-weight: bold;">
            此网站你可以上传分享自己的图书，，
          </p>
         </div>
         <div>
          <p class="text-center"  style="color:black;font-size: 13px;font-weight: bold;">
            也可以看到近期受欢迎的书目
          </p>
         </div>
<!--         <div>-->
<!--          <p class="text-center"  style="color:black;font-size: 13px;font-weight: bold;">-->
<!--            在喜欢的书籍底下评论…………-->
<!--          </p>-->
<!--         </div>-->
       </div>
       <div class="content">
         <div>
          <p class="text-center"  style="color:black;font-size: 13px;font-weight:bold;">
            可以通过此网站来借阅你想要的图书，
          </p>
         </div>
         <div>
          <p class="text-center"  style="color:black;font-size: 13px;font-weight: bold;">
            但同时也要记得预约…………
          </p>
         </div>
        <img src="images/choice2.jpg" class="img-thumbnail" alt="...">
       </div>
       <div class="last">
        <img src="images/choice3.jpg" class="img-thumbnail" alt="...">
        
        <p class="text-center"  style="color: rgb(0, 0, 0);font-size: 13px;font-weight:bold;">
          管理员会审核上传的图书，从而维护这个这个网站平稳有序…………
        </p>
       </div>
     </div>
     
     <div class=bottom>
       <p class="text-center"  style="color: rgb(0, 0, 0);font-size: 10px;font-weight:lighter;">
        此网站版权由第四组所有
       </p>
    </div>


    </div>
    <script src="js/jquery-3.6.0.slim.min.js" ></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>


    <script>
      




        
        const app={
            
            data(){
           
            },
            
            methods:{
             
            },

            
            mounted(){
              
              
            }
        };
        Vue.createApp(app).mount('#app')//#用来说明app是一个id

    </script>

  </body>
</html>